<script setup>
  // 1.0 定义一个响应式数据
  import { reactive, ref } from 'vue'
  // https://shenling-admin.botue.com/index.html 请大家使用这个网址自行注册一个自己的登录账号

  import userApi from '@/apis/user.js'
  import { useUserStore } from '@/stores/user.js'

  // 表单元素的 ref 属性
  const accountForm = ref()

  const formData = reactive({
    account: 'zyb123', //用户名
    password: '123456', //密码
  })

  // 2. 定义uni-forms中的元素验证规则
  const accountRules = reactive({
    account: {
      rules: [
        { required: true, errorMessage: '请输入登录账号' },
        { pattern: '^[a-zA-Z0-9]{6,8}$', errorMessage: '登录账号格式不正确' },
      ],
    },
    password: {
      rules: [
        { required: true, errorMessage: '请输入登录密码' },
        { pattern: '^\\d{6}$', errorMessage: '登录密码格式不正确' },
      ],
    },
  })

  // 定义表达触发函数
  async function onFormSubmit() {
    // uni.utils.toast('表单触发')
    // 触发表单验证规则
    try {
      // 如果表单验证不合法，则直接报错到catch里面去执行，否则正常执行
      // accountInfo返回的就是用户输入的用户名和密码
      let accountInfo = await accountForm.value.validate() //返回的是一个Promise

      // TODO：将用户名和密码通过请求服务器接口完成登录工作
      // 1. 请求服务器接口 post请求
      /*{
          code:逻辑状态码 200表示正常数据，非200就是异常
          msg:后端提示回来的信息
          data:就是每个接口响应的正常业务数据
        }
      */
      let { data } = await userApi.login(accountInfo)
      // console.log(data)
      let token = data

      // 2. 将token保存到pinia中
      const userStore = useUserStore()
      userStore.token = token //持久化到了磁盘

      // 3. 跳转到任务的首页/pages/task/index
      // switchTab:uni自带的跳转方法，这个方法只适应于跳转到tabbar配置好的页面
      uni.switchTab({
        url: '/pages/task/index',
      })
    } catch (e) {}
  }
</script>
<template>
  <uni-forms
    class="login-form"
    ref="accountForm"
    :model="formData"
    :rules="accountRules"
  >
    <uni-forms-item name="account">
      <input
        type="text"
        placeholder="请输入账号"
        v-model="formData.account"
        class="uni-input-input"
        placeholder-style="color: #818181"
      />
    </uni-forms-item>
    <uni-forms-item name="password">
      <input
        type="text"
        placeholder="请输入密码"
        v-model="formData.password"
        class="uni-input-input"
        placeholder-style="color: #818181"
      />
    </uni-forms-item>
    <button class="submit-button" @click="onFormSubmit">登录</button>
  </uni-forms>
</template>
<style lang="scss" scoped>
  @import './styles.scss';
</style>
